<template>
    <main-body>
        <template #main>
            <p v-html="html"></p>
        </template>
        <template #aside-right>
            <calendar/>
        </template>
    </main-body>
</template>

<script lang="ts">
import marked from 'marked'
import hljs from "highlight.js";
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/monokai-sublime.css'

import Main from '../../components/main.vue'
import Calendar from '../../components/calendar.vue'

import {ref} from 'vue'


interface gProp{
    html:string
}

 marked.setOptions({
          renderer: new marked.Renderer(),
          highlight: function(code) {
            return hljs.highlightAuto(code).value;
          },
          pedantic: false,
          gfm: true,
        //   tables: true,
          breaks: false,
          sanitize: false,
          smartLists: true,
          smartypants: false,
          xhtml: false
        }
      );


export default {
    name:'content',
    components:{
        'main-body':Main,
        Calendar,
    },

    setup(props:gProp){
        const html = ref(marked('# dddd \n```javascript\nfunction(){\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n\n\tconsole.log(123)\n}\n```'))
        return{
            html,
        }
    }
}
</script>

<style lang="less" scoped>
    
</style>